import React, { useState } from 'react'
import { Button, Input, ResultPage, Tabs } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
function Index() {
    const nav=useNavigate()
    const [start,setStart]=useState('')
    const [end,setEnd]=useState('')
    const golist=()=>{
        nav('/list',{state:{start,end}})
    }
  return (
    <div>
          <ResultPage
      status=''
      title='购票系统'
      description='12306'
    >
      <ResultPage.Card style={{  padding: 8 }}>
         <Tabs>
          <Tabs.Tab title='单程' key='fruits'>
            <div>
                <Input value={start} onChange={(val)=>setStart(val)}/>
                <span><LoopOutline /></span>
                <Input value={end} onChange={(val)=>setEnd(val)}/>
            </div>
            <Button block color='primary' size='small' onClick={()=>golist()}>搜索</Button>
          </Tabs.Tab>
          <Tabs.Tab title='往返' key='vegetables'>
            往返
          </Tabs.Tab>
          <Tabs.Tab title='特价' key='animals'>
            特价
          </Tabs.Tab>
        </Tabs>
      </ResultPage.Card> 
    </ResultPage>
    </div>
  )
}

export default Index